<template>
  <div class="orderdetils">
    <div class="head">
      <img src="@/image/fanhui.png" @click="toBack" />
      <div class="head_text">订单详情</div>
    </div>
    <!-- 快速配送 -->
    <van-tabs @click="onClick">
      <div class="solid"></div>
      <van-tab title="快速配送">
        <div class="site">
          <div class="moren">
            <div class="mr_img">默认</div>
            <div class="moren_diqu">广东&nbsp广州&nbsp越秀区</div>
          </div>
          <div class="didian">
            <div class="didian_1">东风中路268号 1109-1110</div>
          </div>
          <div class="xingming">
            <div class="xingming_1">张小白&nbsp181***0260</div>
          </div>
          <div class="jinru" @click="tanchuang">></div>
        </div>
        <div class="solid"></div>
        <!-- 第二部分 -->
        <div class="second">
          <div class="one">[正在开团]立即支付，即可开团成功</div>
          <div class="perpo">
            <div class="dzf">
              <img src="@/image/meinv.jpg" alt="" />
              <div class="dzf_text" style="margin-left:40px;font-size:14px">
                待支付
              </div>
            </div>
            <!-- <img src="@/image/meinv.jpg" alt="" />待支付 -->
            <div class="dzf">
              <img src="@/image/meinv.jpg" alt="" />
              <div
                class="fenxiang_text"
                style="margin-left:40px;font-size:14px"
              >
                分享拼团
              </div>
            </div>
          </div>
        </div>
        <div class="solid"></div>
        <div class="zffs">
          <div class="fs">支付方式</div>
          <div class="zxzf">在线支付</div>
        </div>
        <div class="solid"></div>
        <div class="third">
          <div class="shop_name">
            <div class="name_text">店铺名称123</div>
          </div>
        </div>
        <div class="npm">
          <div class="left_img">
            <img src="@/image/meinv.jpg" alt="" />
            <div class="left_text">
              <div class="img_text">岩石花岗石</div>
              <div class="lang">长宽高60*20*60cm</div>
            </div>
            <div class="our">共 1件</div>
          </div>
        </div>
        <div class="solid"></div>
        <div class="fore">
          <div class="fore_one">
            <div class="fp">发票</div>
            <div class="mx">电子 (商品明细-个人)</div>
          </div>
          <div class="fore_two">
            <div class="yhj">优惠券</div>
            <div class="wy">无可用</div>
          </div>
        </div>
        <div class="solid"></div>
        <!-- 第五层 -->
        <div class="five">
            <div class="five_much">
                <div class="five_text">商品金额</div>
                <div class="right_text">$168</div>
            </div>
            <div class="yunfei">
                <div class="yunfei_text">运费 (总重:4.960 kg )</div>
                <div class="text_right">+ $2.50</div>
            </div>
        </div>
                <div class="solid"></div>
                <div class="tab">
                    <div class="zongjia">$170.50</div>
                    <div class="btn">提交订单</div>
                </div>
      </van-tab>
      <!-- 到店自取 -->
      <van-tab title="到店自取">
          <div class="site">
          <div class="moren">
            <div class="ziti">
                <img src="@/image/didian.png" alt="">
            </div>
            <div class="moren_diqu">请选择自提点</div>
          </div>
          <div class="didian">
            <div class="didian_1">姓名</div>
            <input type="text" placeholder = "请填写取货人姓名" style="margin-left:20px;font-size:14px">
          </div>
          <div class="xingming">
            <div class="xingming_1" style="margin-top:5px">手机</div>
           <input type="text" placeholder = "请填写取货人手机" style="margin-left:20px;margin-top:-10px;font-size:14px">
          </div>
          <div class="jinqu">></div>
        </div>
        <div class="solid"></div>
        <!-- 第二部分 -->

        <div class="solid"></div>
        <div class="zffs">
          <div class="fs">支付方式</div>
          <div class="zxzf">在线支付</div>
        </div>
        <div class="solid"></div>
        <div class="third">
          <div class="shop_name">
            <div class="name_text">店铺名称123</div>
          </div>
        </div>
        <div class="npm">
          <div class="left_img">
            <img src="@/image/meinv.jpg" alt="" />
            <div class="left_text">
              <div class="img_text">岩石花岗石</div>
              <div class="lang">长宽高60*20*60cm</div>
            </div>
            <div class="our">共 1件</div>
          </div>
        </div>
        <div class="solid"></div>
        <div class="fore">
          <div class="fore_one">
            <div class="fp">发票</div>
            <div class="mx">电子 (商品明细-个人)</div>
          </div>
          <div class="fore_two">
            <div class="yhj">优惠券</div>
            <div class="wy">无可用</div>
          </div>
        </div>
        <div class="solid"></div>
        <!-- 第五层 -->
        <div class="five">
            <div class="five_much">
                <div class="five_text">商品金额</div>
                <div class="right_text">$168</div>
            </div>
            <div class="yunfei">
                <div class="yunfei_text">运费 (总重:4.960 kg )</div>
                <div class="text_right">+ $2.50</div>
            </div>
        </div>
                <div class="solid"></div>
                <div class="tab">
                    <div class="zongjia">$170.50</div>
                    <div class="btn">提交订单</div>
                </div>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
export default {
  name: "orderdetils",
  methods: {
    toBack() {
      this.$router.go(-1); //返回上一层
    },
    tanchuang(){
        this.$router.push({
            path:"/tanchuang"
        })
    }
  }
};
</script>
<style scoped>
.head {
  width: 100%;
  height: 44px;
  display: flex;
  background-color: #f8f8f8;
}
.head img {
  width: 20px;
  height: 18px;
  float: left;
  margin-top: 13px;
  color: #080808;
}
.head .xs {
  width: 18px;
  height: 18px;
  text-align: center;
  line-height: 44px;
  margin-left: 15px;
}
.head .head_text {
  font-size: 14px;
  color: #222222;
  text-align: center;
  line-height: 44px;
  margin-left: 140px;
}
.solid {
  width: 100%;
  height: 5px;
  background-color: #f7f7f7;
}
.site {
  width: 100%;
  height: 120px;
  overflow: hidden;
  /* background-color: pink; */
}
.moren {
  width: 100%;
  height: 40px;
  overflow: hidden;
  display: flex;
  /* background-color: powderblue; */
}
.didian {
  width: 100%;
  height: 40px;
  display: flex;
  /* background-color: black; */
}
.xingming {
  width: 100%;
  height: 40px;
  display: flex;
  line-height: 40px;
  /* background-color: green; */
}
.mr_img {
  width: 35px;
  height: 20px;
  font-size: 12px;
  margin-top: 10px;
  text-align: center;
  color: #fff;
  margin-left: 10px;
  background-color: red;
}
.moren_diqu {
  font-size: 14px;
  margin-top: 10px;
  margin-left: 10px;
  color: rgba(16, 16, 16, 100);
  text-align: center;
}
.didian .didian_1 {
  font-size: 14px;
  color: rgba(16, 16, 16, 100);
  line-height: 40px;
  margin-left: 10px;
}
.xingming .xingming_1 {
  margin-left: 10px;
  font-size: 14px;
  color: rgba(16, 16, 16, 100);
}
.jinru {
  display: flex;
  font-size: 25px;
  float: right;
  margin-right: 30px;
  margin-top: -70px;
}
.second {
  width: 100%;
  height: 102px;
  /* display: flex; */
  /* background-color: pink; */
}
.one {
  widows: 100%;
  height: 21px;
  display: flex;
  font-size: 14px;
  margin-left: 10px;
  /* background-color: powderblue; */
}
.perpo {
  width: 100%;
  height: 60px;
  display: flex;
  /* background-color: plum; */
  margin-top: 10px;
}
.perpo img {
  width: 45px;
  height: 45px;
  float: left;
  margin-left: 50px;
  border-radius: 50%;
}
.zffs {
  width: 100%;
  height: 50px;
  display: flex;
  line-height: 50px;
  font-size: 14px;
  overflow: hidden;
  /* background-color: pink; */
}
.fs {
  margin-left: 20px;
}
.zxzf {
  margin-left: 220px;
}
.third {
  width: 100%;
  display: flex;
  overflow: hidden;
  /* background-color: pink; */
}
.shop_name {
  display: flex;
  width: 100%;
  height: 25px;
  font-size: 14px;
  /* background-color: plum; */
}
.name_text {
  margin-left: 15px;
  color: rgba(16, 16, 16, 100);
  font-size: 14px;
  text-align: left;
  font-family: SourceHanSansSC-bold;
}
.npm {
  width: 100%;
  height: 90px;
  /* background-color: green; */
}
.left_img img {
  width: 80px;
  height: 80px;
  margin-left: 15px;
}
.left_text {
  width: 110px;
  height: 80px;
  margin-left: 100px;
  margin-top: -80px;
  /* background-color: grey; */
}
.img_text {
  font-size: 14px;
  display: flex;
  color: rgba(16, 16, 16, 100);
  font-family: PingFangSC-regular;
}
.lang {
  left: 113px;
  top: 493px;
  width: 129px;
  height: 24px;
  margin-top: 30px;
  border-radius: 10px;
  background-color: #888;
  line-height: 24px;
  color: rgba(16, 16, 16, 100);
  font-size: 14px;
  text-align: center;
  font-family: Arial;
}
.our {
  margin-left: 270px;
  margin-top: -30px;
  color: rgba(16, 16, 16, 100);
  font-size: 14px;
  font-family: SourceHanSansSC-regular;
}
.fore {
  width: 100%;
  height: 113px;
  font-size: 14px;
  /* background-color: plum; */
}
.fore_one {
  width: 100%;
  height: 55px;
  display: flex;
  /* background-color: purple; */
}
.fp {
  line-height: 55px;
  margin-left: 10px;
  font-family: SourceHanSansSC-regular;
  color: rgba(16, 16, 16, 100);
}
.mx {
  margin-left: 200px;
  line-height: 55px;
  font-family: SourceHanSansSC-regular;
  color: rgba(16, 16, 16, 100);
}
.fore_two {
  width: 100%;
  height: 55px;
  display: flex;
  font-size: 14px;
  /* background-color: red; */
}
.yhj {
  line-height: 55px;
  margin-left: 10px;
  font-family: SourceHanSansSC-regular;
  color: rgba(16, 16, 16, 100);
}
.wy {
  margin-left: 250px;
  line-height: 55px;
  font-family: SourceHanSansSC-regular;
  color: rgba(16, 16, 16, 100);
}
.five{
width: 100%;
  height: 113px;
  font-size: 14px;
  /* background-color: plum; */
}
.five_much{
  width: 100%;
  height: 55px;
  display: flex;
  /* background-color: purple; */
}
.five_text{
  line-height: 55px;
  margin-left: 10px;
  font-family: SourceHanSansSC-regular;
  color: rgba(16, 16, 16, 100);
}
.right_text{
  margin-left: 250px;
  line-height: 55px;
  font-family: SourceHanSansSC-regular;
  color: rgba(16, 16, 16, 100);
}
.yunfei{
  width: 100%;
  height: 55px;
  display: flex;
  font-size: 14px;
  /* background-color: red; */
}
.yunfei_text{
  line-height: 55px;
  margin-left: 10px;
  font-family: SourceHanSansSC-regular;
  color: rgba(16, 16, 16, 100)
}
.text_right{
  margin-left: 160px;
  line-height: 55px;
  font-family: SourceHanSansSC-regular;
  color:red;
}
.tab{
    width: 100%;
    height: 70px;
    display: flex;
    /* background-color: pink; */
}
.zongjia{
width: 78px;
line-height:78px;
color: rgba(246, 57, 13, 100);
font-size: 18px;
text-align: left;
margin-left: 10px;
font-family: SourceHanSansSC-regular;

}
.btn{
width: 110px;
height: 40px;
line-height: 40px;
background-color: #C39B73;
border-radius: 20px;
margin-left: 160px;
margin-top: 18px;
}
.jinqu{
    font-size: 20px;
    margin-top: -100px;
    float: right;
    margin-right: 10px;
}
</style>
